<template>
  <div class="app-container">
    <div v-for="(item, index) in ruleList" :key="index" class="item-container">
      <div class="header">
        <!-- <div class="title">「非属地上牌」规则</div> -->
        <div class="title">「{{ ruleTypeMap[item.ruleType] }}」规则</div>
        <div class="toggle">
          <el-switch v-model="ruleList[index].ruleStatus" :active-value="1" :inactive-value="0" @change="switchRuleStatus(ruleList[index])" />
        </div>
      </div>
      <div class="content">
        <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="100px">
          <el-form-item label="车辆状态">
            <!-- <div v-if="item.type"></div> -->
            <!-- <el-select v-model="ruleList[index].vehicleStatus" :disabled="!!item.ruleType" placeholder="请选择车辆状态" @change="$forceUpdate()"> -->
            <el-select v-model="ruleList[index].vehicleStatus" disabled placeholder="请选择车辆状态" @change="$forceUpdate()">
              <el-option v-for="vItem in vehicleStatusMap" :key="vItem.value" :label="vItem.label" :value="vItem.value" />
              <!-- <el-option label="已入库" :value="1" />
              <el-option label="已出库" :value="2" />
              <el-option label="已开票" :value="3" />
              <el-option label="已上牌" :value="4" /> -->
            </el-select>
          </el-form-item>
        </el-form>
        <el-form v-if="item.ruleType===0" :inline="true" class="demo-form-inline" label-position="right" label-width="100px">
          <el-form-item label="报警规则">
            当车辆所属经销店的 <span>城市</span> 与 <span>已上牌</span> 不一致时，即生成报警数据.
          </el-form-item>
        </el-form>
        <el-form v-if="item.ruleType===1" :inline="true" class="demo-form-inline" label-position="right" label-width="100px">
          <el-form-item label="报警规则">
            超出<span>行政区域电子栏</span> 持续 <el-input-number v-model="item.maxNum" :min="12" :max="999" :step="1" placeholder="请输入数值" /> 小时生成报警数据.
          </el-form-item>
        </el-form>
        <div v-if="item.ruleType===2">
          <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="100px">
            <el-form-item label="车系">
              <el-select v-model="ruleList[index].seriesName" multiple clearable placeholder="请选择车型" @change="setModelOptios(index)">
                <el-option v-for="model in vehicleOptions" :key="model.seriesName" :label="model.seriesName" :value="model.seriesName" />
              </el-select>
            </el-form-item>
          </el-form>
          <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="100px">
            <el-form-item label="车型">
              <el-select v-model="ruleList[index].vehicleType" multiple clearable placeholder="请选择车型">
                <el-option v-for="model in modelOptios" :key="model.modelName" :label="model.modelName" :value="model.modelName" />
              </el-select>
            </el-form-item>
          </el-form>
          <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="100px">
            <el-form-item label="报警规则">
              定位在 <span>非出行中心电子围栏</span>
              围栏范围内持续时长(小时) <el-input-number v-model="item.minNum " :min="12" :max="999" placeholder="请输入数值" />  即生成报警数据.
            </el-form-item>
          </el-form>
        </div>
        <div v-if="item.ruleType===3">
          <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="100px">
            <el-form-item label="报警规则">
              当车辆在 <span>上牌后</span> <el-input-number v-model="item.minNum " :min="1" :max="999" placeholder="请输入数值" />
              天内超过 <span>行政区域电子围栏 </span>持续<el-input-number v-model="item.maxNum " :min="1" :max="999" placeholder="请输入数值" />  天即生成报警数据.
            </el-form-item>
          </el-form>
        </div>
        <el-form v-if="item.ruleType===4" :inline="true" class="demo-form-inline" label-position="right" label-width="100px">
          <el-form-item label="报警规则">
            当车辆所属经销店的<span>城市</span> 与 <span>开票城市</span> 不一致时，即生成报警数据。
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-show="ruleList.length" class="footer" style="text-align: center;">
      <el-button type="primary" @click="handelEdit">修改</el-button>
    </div>
    <!-- <div class="item-container">
      <div class="header">
        <div class="title">「车辆摆卖」规则</div>
        <div class="toggle">
          <el-switch />
        </div>
      </div>
      <div class="content">
        <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="100px">
          <el-form-item label="车辆状态">
            <el-select v-model="editForm.vehicleStatus" placeholder="请选择车辆状态">
              <el-option v-for="key in vehicleStatusMap" :key="key" :label="vehicleStatusMap[key]" :value="key" />
            </el-select>
          </el-form-item>
        </el-form>
        <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="100px">
          <el-form-item label="报警规则">
            超出<span>行政区域电子栏</span> 持续 <el-input-number :min="12" :max="999" :step="1" placeholder="请输入数值" /> 小时生成报警数据.
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="item-container">
      <div class="header">
        <div class="title">「BC分离异常」规则</div>
        <div class="toggle">
          <el-switch v-model="status" @change="toggleStatus()" />
        </div>
      </div>
      <div class="content">
        <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="100px">
          <el-select v-model="editForm.vehicleStatus" placeholder="请选择车辆状态">
            <el-option v-for="key in vehicleStatusMap" :key="key" :label="vehicleStatusMap[key]" :value="key" />
          </el-select>
        </el-form>
        <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="100px">
          <el-form-item label="车型">
            <el-select v-model="vehicleType" placeholder="请选择车型">
              <el-option v-for="item in modelOptios" :key="item.modelName" :label="item.modelName" :value="item.modelName" />
            </el-select>
          </el-form-item>
        </el-form>
        <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="100px">
          <el-form-item label="报警规则">
            定位在 <span>非出行中心电子围栏</span>
            围栏范围内持续时长(小时) <el-input-number :min="1" :max="10" placeholder="请输入数值" />  即生成报警数据.
          </el-form-item>
        </el-form>
      </div>
    </div> -->
  </div>
</template>

<script>
import { standardRuleList, editStandardRule, switchStandardRule } from '@/api/crossRegionalMonitoring'
import { getStorageByKey } from '@/utils/public'
// 0=上非属地上牌，1=车辆摆卖，2=BC分离异常，3=异地使用，4=异地开票 ,
const ruleTypeMap = {
  0: '非属地上牌',
  1: '车辆摆卖',
  2: 'BC分离异常',
  3: '异地使用',
  4: '异地开票'
}
const vehicleStatusMap = [
  { value: '0', label: '已发运' },
  { value: '1', label: '已入库' },
  { value: '2', label: '已出库' },
  { value: '3', label: '已开票' },
  { value: '4', label: '已上牌' },
  { value: '5', label: '已入库且未开票' }
]
export default {
  name: 'StandardRule',
  data() {
    return {
      ruleList: [],
      ruleTypeMap,
      vehicleStatusMap,
      editForm: {},
      // 车系车型数据集
      vehicleOptions: getStorageByKey('vehicleMap'),
      modelOptios: [],
      show: false,
      vehicleStatus: 1,
      setDeafaultRuleType: [1, 2]
    }
  },
  created() {
    this.queryStandartList()
  },
  methods: {
    initModeOptions() {
      const allModel = this.vehicleOptions.reduce((newArr, current) => {
        return newArr.concat(current.modelNameList)
      }, [])
      this.modelOptios = allModel
    },
    // 根据所选车型 及时更新车型选项
    setModelOptios(index) {
      // this.ruleList[index].vehicleType = []
      let { seriesName, vehicleType } = this.ruleList[index]
      const vehicleOptions = []
      const tempVehicle = []
      if (seriesName && seriesName.length) {
        seriesName.forEach(sItem => {
          const currentIndex = this.vehicleOptions.findIndex(item => item.seriesName === sItem)
          if (currentIndex > -1) {
            vehicleOptions.push(...this.vehicleOptions[currentIndex].modelNameList)
          }
        })
        if (vehicleType && vehicleType.length) {
            vehicleOptions.forEach(vItem => {
              if (vehicleType.includes(vItem.modelName)) {
                tempVehicle.push(vItem.modelName)
              }
            })
        }
        this.modelOptios = vehicleOptions
        this.ruleList[index].vehicleType = tempVehicle

      } else {
        this.ruleList[index].vehicleType = []
        this.initModeOptions()
      }
    },
    queryStandartList() {
      standardRuleList().then(res => {
        const { data } = res
        const ruleList = data.data
        this.ruleList = []
        ruleList.forEach(item => {
          item.vehicleStatus = this.setDeafaultRuleType.includes(item.ruleType) ? '5' : item.vehicleStatus
          if (item.ruleType === 2){
            if (item.seriesName) {
              item.seriesName = item.seriesName.split(',')
            }
            if (item.vehicleType) {
              item.vehicleType = item.vehicleType.split(',')
            }
          }
          this.ruleList.push(item)
        })
      })
    },
    handelEdit() {
      const params = [...this.ruleList]
      params.map((item) => {
        this.$delete(item, 'ruleStatus')
        if (this.setDeafaultRuleType.includes(item.ruleType)) {
          item.vehicleStatus = '1,2'
        }
        if (Array.isArray(item.seriesName)){
          item.seriesName = item.seriesName.join(',')
        }
        if (Array.isArray(item.vehicleType)){
          item.vehicleType = item.vehicleType.join(',')
        }
      })
      editStandardRule(params).then((res) => {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.queryStandartList()
      })
    },
    switchRuleStatus(params) {
      const { ruleStatus, id } = params
      const putParams = { ruleStatus, id }
      switchStandardRule(putParams).then(res => {
        const { data } = res
        this.queryStandartList()
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .item-container{
    width: 100%;
    background-color: rgba(242, 242, 242, 1);
    padding: 0 15px 10px 15px;
    border: 1px solid rgba(215, 215, 215, 1);
    margin-bottom: 20px;
    .header{
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        .title{
            font-size: 14px;
            font-weight: 650;
        }
    }
    .content{
        background: #fff;
        padding-top: 15px;
        span{
          font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
          font-weight: 650;
          font-style: normal;
          font-size: 16px;
          color: #1A1A1A;
        }
    }
  }
</style>
